<template>
  <div>


    <div style="float: right;width: 1600px;margin-top: 20px">
      <div>
        <!-- 不需要直接显示整个数组，因为我们将逐个显示其元素 -->
        <div v-for="item in arr" style="float: left; margin-left: 100px; display: flex;">
          <el-card style="max-width: 480px; display: flex;">
            <div style="flex: 1; display: flex;">
              <!-- 图片显示在左边 -->
              <img :src="item.pic" alt="" style="width: 100px; height: 100px; margin-right: 20px;">
              <!-- 数据显示在右边 -->
              <div style="flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start;">
                <!-- 姓名独占一行，加粗加大 -->
                <div style="width: 100%; font-weight: bold; font-size: 1.2em;">
                  <p class="text item">车牌：{{ item.licenseNumber }}</p>
                </div>
                <!-- 剩余字段两个两个排列 -->
                <div style="width: 50%;">
                  <p class="text item">车主: {{ item.populationName }}</p>
                </div>
                <div style="width: 50%;">
                  <p class="text item">小区: {{ item.plotName }}</p>
                </div>
                <div style="width: 50%;">
                  <p class="text item">栋楼: {{ item.buildingName }}</p>
                </div>
                <div style="width: 50%;">
                  <p class="text item">单元: {{ item.apartmentName }}</p>
                </div>
                <div style="width: 50%;">
                  <p class="text item">房间: {{ item.roomName }}</p>
                </div>
                <div style="width: 50%;">
                  <p class="text item">证件号码: {{ item.populationIdNumber }}</p>
                </div>
                <!-- 如果需要显示更多信息，可以继续添加 -->
              </div>
            </div>
            <template #footer>Footer content</template>
          </el-card>
        </div>
      </div>
    </div>


    <el-button @click="add" size="medium" style="margin-top: 40px;float: right;margin-right: 80px" >添加房屋</el-button>
    <br>
    <el-table :data="tableData" style="width: 90%;padding-top: 80px;padding-left: 5%">
      <el-table-column label="房间号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.roomNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="楼层" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.roomNumber.slice(0,1) }}层</span>
        </template>
      </el-table-column>
      <el-table-column label="单元" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.unitName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="栋" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.buildingName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="小区" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.plotName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="180">
        <template slot-scope="scope">
          <span v-show="scope.row.populationName==null">暂无人居住</span>
          <span v-show="scope.row.populationName!=null">已有人居住</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="新增房屋" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="小区名称：" :label-width="formLabelWidth" style="padding-left: 10px" >
          <el-select v-model="form.plotId" placeholder="请选择小区" @change="handleChangePlotId"  >
            <el-option v-for="item in plot" :label="item.name" :value="item.id" :key="item.id" ></el-option>
          </el-select>
          <span v-show="this.aa==1" style="margin-left: 10px;color: red">请选择小区</span>
        </el-form-item>
        <el-form-item label="楼栋编号：" style="padding-left: 50px">
<!--          <el-input placeholder="请输入" v-model="form.buildingId">-->
<!--            <template slot="append">栋</template>-->
<!--            -->
<!--          </el-input>-->
          <el-input-number v-model="form.buildingId" @change="handleChange" :min="1" :max="100"></el-input-number>栋
        </el-form-item>
        <el-form-item label="单元：" style="padding-left: 50px" >
<!--          <el-input v-model="form.unitId"></el-input>-->
          <el-input-number v-model="form.unitId" :min="1" :max="100" style="margin-left: 30px" ></el-input-number>
        </el-form-item>
        <el-form-item label="起始楼层：" style="padding-left: 50px" >
<!--          <el-input placeholder="请输入" v-model="form.startFloor">-->
<!--            <template slot="append">层</template>-->
<!--          </el-input>-->
          <el-input-number v-model="form.startFloor" :min="1" :max="100"></el-input-number>层
        </el-form-item>
        <el-form-item label="结束楼层：" style="padding-left: 50px" >
          <el-input placeholder="请输入" v-model="form.endFloor" @blur="blur" style="width:200px "></el-input>层
          <span v-show="this.aa==3" style="margin-left: 10px;color: red">结束楼层不能为0</span>
        </el-form-item>
        <el-form-item label="起始户数：" style="padding-left: 50px" >
<!--          <el-input placeholder="请输入" v-model="form.startNumber">-->
<!--            <template slot="append">户</template>-->
<!--          </el-input>-->
          <el-input-number v-model="form.startNumber" :min="1" :max="100"></el-input-number>户
        </el-form-item>
        <el-form-item label="每层户数：" style="padding-left: 50px" >
<!--          <el-input placeholder="请输入" v-model="form.endNumber">-->
<!--            <template slot="append">户</template>-->
<!--          </el-input>-->
          <el-input-number v-model="form.endNumber" :min="1" :max="100"></el-input-number>户
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTenement">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="房屋信息" :visible.sync="dialogFormVisibles">
      <el-form :model="forms">
        <el-form-item label="小区名称" :label-width="formLabelWidth">
          <el-input v-model="forms.plotName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="栋" :label-width="formLabelWidth">
          <el-input v-model="forms.buildingName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单元" :label-width="formLabelWidth">
          <el-input v-model="forms.unitName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="楼层" :label-width="formLabelWidth">
          <el-input v-model="forms.floorName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="房间号" :label-width="formLabelWidth">
          <el-input v-model="forms.roomNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label=this.title :label-width="formLabelWidth">
          <el-select v-model="forms.populationId" placeholder="请选择居住人">
            <el-option v-for="item in population" :label="item.name" :value="item.id" :key="item.id" ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPopulation">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {findList, add, findPopulationList, addPopulation, lists} from "@/api/community/tenement";
import {findAll} from "@/api/community/plot";
import {findVehicleEquipmentByPlotIdList} from "@/api/community/all";
import {populationlist} from "@/api/community/population";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
  export default {
    //import引入的组件需要注入到对象中才能使用"
    components: {},
    props: {},
    data() {
      //这里存放数据"

      return {
        id:'',
        tableData: [],
        queryid:'',
        dialogFormVisible: false,
        formLabelWidth: '120px',
        form:{
          buildingId:1,
          unitId:1,
          startFloor:1,
          startNumber:1,
          endNumber:1
        },
        forms:{},
        plot:[],
        aa:0,
        dialogFormVisibles:false,
        title:'添加入住人信息',
        bb:1,
        population:[],
        arr:[],

      };
    },
    //计算属性 类似于data概念",
    computed: {},
    //监控data中的数据变化",
    watch: {},
    //方法集合",
    methods: {
      findVehicleEquipmentByPlotIdList(){
        findVehicleEquipmentByPlotIdList(this.equipment).then(
          res => {
            this.arr4=res.data.list
          }
        )
      },
      addPopulation(){
        alert(this.forms.plotId)
        addPopulation(this.forms).then(
          res => {
            this.$message.success(res.msg)
            this.findLists()
          }
        )
      },
      handleEdit(tenement){
        this.forms=tenement
        this.forms.floorName=tenement.roomNumber.slice(0,1)
        if(this.forms.populationName!=null){
          this.bb=2
          this.title="修改入住人信息"
        }
        this.dialogFormVisibles=true
      },
      blur(){
        if(this.form.endFloor==0){
          this.aa=3
        }
      },
      handleChangePlotId(){
        if(this.form.plotId!=null){
          this.aa=0
        }
      },
      handleChange(){
        if(this.form.plotId==null){
          this.aa=1
        }
      },
      addTenement(){
        if(this.form.plotId==null){
          alert("请选择小区")
        }
        if(this.form.buildingId==null){
          alert("请输入楼栋编号")
        }
        if(this.form.unitId==null){
          alert("请输入单元")
        }
        if(this.form.startFloor==null){
          alert("请输入起始楼层")
        }
        if(this.form.endFloor==null){
          alert("请输入结束楼层")
        }
        if(this.form.startNumber==null){
          alert("请输入起始户数")
        }
        if(this.form.endNumber==null){
          alert("请输入每层户数")
        }
        add(this.form).then(
          res => {
            this.$message.success(res.msg)
            this.dialogFormVisible=false
            this.findPlot()
          }
        )
      },
      add(){
        this.dialogFormVisible=true
      },
      findLists(){
        if(this.queryid!=null && this.queryid!=undefined){
          findList(this.queryid).then(
            res => {
              console.log(res)
              this.tableData=res.data
            }
          )
        }
        if(this.queryid==null || this.queryid==undefined){
          findList(this.id).then(
            res => {
              console.log(res)
              this.tableData=res.data
            }
          )
        }
      },
      findPlot(){
        findAll().then(
          res => {
            console.log(res)
            this.plot=res.data
          }
        )
      },
      findPopulationList(){
        findPopulationList().then(
          res => {
            this.population=res.data
          }
        )
      }
    },
    //生命周期 - 创建完成（可以访问当前this实例）",
    created() {
      this.queryid=this.$route.query.id
      this.findLists(this.queryid)
      this.findPlot()
      this.findPopulationList()
    },
    //生命周期 - 挂载完成（可以访问DOM元素）",
    mounted() {
    },
    beforeCreate() {
    }, //生命周期 - 创建之前",
    beforeMount() {
    }, //生命周期 - 挂载之前",
    beforeUpdate() {
    }, //生命周期 - 更新之前",
    updated() {
    }, //生命周期 - 更新之后",
    beforeDestroy() {
    }, //生命周期 - 销毁之前",
    destroyed() {
    }, //生命周期 - 销毁完成",
    activated() {
    } //如果页面有keep-alive缓存功能，这个函数会触发",
  };
</script>
<style scoped>

</style>
